<template>
    <div>
        <el-card shadow="never">
            <div class="betflex">
                <div>筛选搜索</div>
                <div>
                    <el-button size="small">重置</el-button>
                    <el-button size="small" type="primary">查询</el-button>
                </div>
            </div>
            <el-container class="searchbox">
                <div>
                    <span>会长UID：</span>
                    <el-input placeholder='请输入' clearable class='searchInput'></el-input>
                </div>
                <div>
                    <span>会长UID：</span>
                    <el-input placeholder='请输入' clearable class='searchInput'></el-input>
                </div>
                <div>
                    <span>会长UID：</span>
                    <el-input placeholder='请输入' clearable class='searchInput'></el-input>
                </div>
                <div>
                    <span>会长UID：</span>
                    <el-input placeholder='请输入' clearable class='searchInput'></el-input>
                </div>
            </el-container>
        </el-card>
        <el-card shadow="never" class="operate-container">
            <div class="betflex">
                <span>数据列表</span>
                <div>
                    <el-button type="primary" class="btn-opera" @click="add()" icon="el-icon-refresh" size="small"></el-button>
                    <el-button type="primary" class="btn-opera" @click="add()" size="small">添加</el-button>
                </div>
            </div>
        </el-card>
        <div class="margintop20">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="资源名称">
                </el-table-column>
                <el-table-column prop="date" label="资源图标">
                </el-table-column>
                <el-table-column prop="date" label="排序号">
                </el-table-column>
                <el-table-column prop="date" label="资源地址">
                </el-table-column>
                <el-table-column prop="name" label="创建用户">
                </el-table-column>
                <el-table-column prop="date" label="权限字符串">
                </el-table-column>
                <el-table-column prop="name" label="备注">
                </el-table-column>
                <el-table-column prop="address" label="创建时间">
                </el-table-column>
                <el-table-column prop="address" label="编辑时间">
                </el-table-column>
                <el-table-column prop="address" label="编辑用户">
                </el-table-column>
            </el-table>
        </div>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getData"></add-or-update>
    </div>
</template>
<script>
import AddOrUpdate from './sys-menu-update'
export default {
    components: {
        AddOrUpdate
    },
    data() {
        return {
            addOrUpdateVisible: false,
            menuList: [],
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.$api.callName.asidemenuList().then(res => {
                if (res.data.code === 0) {

                } else {

                }
            })
        },
        add() {
            this.addOrUpdateVisible = true;
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init()
            })
            // this.$api.callName.asidemenuAddList({
            //     icon: "",
            //     orderNum: 1,
            //     parentResourceId: 0,
            //     permission: 1,
            //     remark: "第一个菜单",
            //     resourceId: 1,
            //     resourceName: "系统管理",
            //     resourceTypeCode: "A",
            //     url: "",
            //     visibleCode: 1
            // }).then(res => {
            //     if (res.data.code === 0) {

            //     } else {

            //     }
            // })
        }
    }
}
</script>
<style lang="scss">
$pColor: red;
p {
    color: $pColor;
}
</style>